const path=require('path')
//引用热更新的第二部
const webpack=require('webpack')
var htmlWebpackPlugin = require('html-webpack-plugin')//载入配置文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');


//这个配置文件其实就是一个JS文件 通过node模块操作 向外暴露配置对象
module.exports={
    entry:path.join(__dirname,'./src/index.js'),//入口 要使用webpack打包文件
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    devServer:{//这里配置dev-server命令参数第二张形式 相对来说这种方式麻烦一些
        // --open --hot
        open:true,//自动打开浏览器
        hot:true//启用热更新的第一步
    },
    plugins: [// 所有webpack 插件的配置节点
        new webpack.HotModuleReplacementPlugin(),//第三部 new一个热更新构造对象
        new htmlWebpackPlugin({
        template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
        filename: 'index.html' // 设置生成的内存页面的名称
        }),
        new webpack.ProvidePlugin({
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery"
        }),
        new VueLoaderPlugin(),
        ],
    module:{//这个节点用于配置所有的第三方模块加载器
            rules:[//所有第三方模块匹配规则
                {test:/\.css$/, use:['style-loader','css-loader']},//处理CSS的第三方load文件
                {test:/\.less$/, use:['style-loader','css-loader','less-loader']},//配置处理.less文件第三方loader规则
                {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},
                {test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=7631&name=[name].[ext]'},//处理图片路径的loader
                {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
                {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },//配置Babel来转换更高级JS语法
                {test:/\.vue$/, use:'vue-loader'}//处理.vue文件loader
            ]
        },
    resolve:{
        alias:{
            "vue$":"vue/dist/vue.js"
        }
    }       
}